<div class="row justify-content-center">
    <div class="col-lg-9 col-md-12">
        <div class="card b">
            <div class="card-header bg-primary text-bold">
                <i class="fa fa-align-justify"></i> {{ 'user.history.TITLE' | translate }}</div>
            <div class="card-body">
                <table class="table table-responsive-sm table-bordered">
                    <thead>
                        <tr>
                            <th>{{ 'user.history.CATEGORY' | translate }}</th>
                            <th>{{ 'user.history.ACTION' | translate }}</th>
                            <th>{{ 'user.history.WHEN' | translate }}</th>
                            <th>{{ 'user.history.WHO' | translate }}</th>
                            <th>{{ 'user.history.DETAILS' | translate }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let history of historyData">
                            <td>{{history.category}}</td>
                            <td>{{history.action}}</td>
                            <td>{{history.when}}</td>
                            <td>{{history.who}}</td>
                            <td>
                                <button class="btn btn-primary" (click)="history.show = !history.show"><i class="fa fa-clock-o"></i></button>
                                <div *ngIf="history.show"><br>
                                    <pre>{{ parse(history.details) | json}}</pre>
                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>
                <ng-template #loading>
                    <div class="progress mb-3">
                        <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
                            aria-valuemax="100"></div>
                    </div>
                </ng-template>
            </div>
            <div class="card-footer">
                <div class="d-flex">
                    
                    <div class="ml-auto">
                        <div class="input-group">
                            <label class="col-form-label">Items per page:&nbsp;</label>
                            <select class="custom-select" [(ngModel)]="quantity" (change)="loadResources()">
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="40">40</option>
                                <option value="50">50</option>
                            </select>
                            <ngb-pagination [collectionSize]="total" [(page)]="page" [maxSize]="5" [rotate]="true"
                                [ellipses]="false" [boundaryLinks]="true" [pageSize]="quantity" (pageChange)="loadResources()">
                            </ngb-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>